<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>棒棒糖</title>
	</head>
	<style>
		/* 画圆 */
		#d1{
			width: 400px;
			height: 400px;
			background-color: #f00;
			border-radius: 50%;
			/* 微调定位*/
			position: relative;
			left: 137px;
			top: 50px;
		}
		#d2{
			width: 300px;
			height: 300px;
			background-color: #ffff00;
			border-radius: 50%;
			/* 定位属性 直接固定到页面的位置  要跟两个定位 XY轴 left和top*/
			position: relative;
			left: 50px;
			top: 50px;
		}
		#d3{
			width: 200px;
			height: 200px;
			background-color: #550000;
			border-radius: 50%;
			position: relative;
			left: 50px;
			top: 50px;
		}
		p{
			width: 40px;
			height: 400px;
			background-color: #000;
			transform: rotate(30deg);
			position: relative;
			left: 90px;
			top: -41px;
		}
	</style>
	<body>
		<div id="d1">
			<div id="d2">
				<div id="d3"></div>
			</div>
		</div>
		<!-- 画棍 -->
		<p></p>
	</body>
</html>